<template>
  <div class="container">
    <ul class="nav">
      <li class="nav_item"
          @click="hotBtn"
          :class="{'red':mark1}">销量</li>
      <li class="nav_item"
          @click="scoreBtn"
          :class="{'red':mark2}">人气</li>
      <li class="nav_item"
          @click="priceBtn"
          :class="{'red':marks}">
        价格
        <span v-if="mark3">
          <img :src="ImgBaseUrl + '/shang-hui@2x.png'"
               class="nav_up" />
          <img :src="ImgBaseUrl + '/xia-hui@2x.png'"
               class="nav_down" />
        </span>
        <span v-if="ishow3">
          <img :src="ImgBaseUrl + '/shang-hui@2x.png'"
               class="nav_up" />
          <img :src="ImgBaseUrl + '/xia-hong@2x.png'"
               class="nav_down" />
        </span>
        <span v-if="ishidden3">
          <img :src="ImgBaseUrl + '/shang-hong@2x.png'"
               class="nav_up" />
          <img :src="ImgBaseUrl + '/xia-hui@2x.png'"
               class="nav_down" />
        </span>
      </li>
    </ul>
    <scroll-view :scroll-y="true"
                 :style="{'height': '96%'}"
                 @scrolltolower="pullrefresh">
      <div class="mallListbox">
        <shoplist :mall_List="mallList"
                  v-if="!showFlag"></shoplist>
        <div class="daodi"
             v-if="isbottom&&mallList[0]">因为甄选，所以珍稀</div>
      </div>
      <div class="bg"
           :class="{'show':showFlag}">
        <img src="https://h5.ameimeika.com/mp_images/shouye/sousuowujieguo@2x.png"
             class="bg_img" />
        <p class="bg_title">没有找到宝宝查看的内容</p>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import shoplist from "@/components/shop_list/shop_list";
export default {
  data () {
    return {
      ImgBaseUrl: common.image_resource,
      imgUrl: common.image_response,
      mark1: false,
      mark2: false,
      marks: false,
      mark3: true,
      ishow2: false,
      ishow3: false,
      ishidden3: false,
      price: 0,
      mallList: [],
      isbottom: false,
      cate_id: "",
      type: "",
      pageNum: 1,
      sales_num: 0,
      star: 0,
      showFlag: false
    };
  },
  methods: {
    //销量
    hotBtn () {
      this.mark1 = true;
      this.mark2 = false;
      this.marks = false;
      this.mark3 = true;
      this.ishow3 = false;
      this.ishidden3 = false;
      this.sales_num = 1;
      this.star = 0;
      this.price = 0;
      this.pageNum = 1;
      this.getData();
    },
    //人气
    scoreBtn () {
      this.mark1 = false;
      this.mark2 = true;
      this.marks = false;
      this.mark3 = true;
      this.ishow3 = false;
      this.ishidden3 = false;
      this.sales_num = 0;
      this.star = 1;
      this.price = 0;
      this.pageNum = 1;
      this.getData();
    },
    //价格
    priceBtn () {
      this.isbottom = false;
      this.mark1 = false;
      this.ishow1 = false;
      this.ishidden1 = false;
      this.mark2 = false;
      this.marks = true;
      this.ishow2 = false;
      this.ishidden2 = false;
      this.sales_num = 0;
      this.star = 0;
      // 取反
      this.mark3 = true;
      this.ishidden3 = !this.ishidden3;
      this.ishow3 = !this.ishidden3;
      if (this.ishow3) {
        this.price = 1;
      } else if (this.ishow3 == false) {
        this.price = 2;
      }
      this.pageNum = 1;
      this.getData();
    },
    getData (e) {
      let that = this;
      if (that.isbottom) {
        return false;
      }
      common.mmk_Loading(0);
      let obj = {
        page: that.pageNum,
        pageSize: 10,
        sales_sort: that.sales_num,
        popularity_sort: that.star,
        price_sort: that.price,
        cate_id: that.cate_id,
        type: that.type,
        user_id: wx.getStorageSync("user_id") || 0
      };
      common.fly_post("api/v4_5/shop_goods/index", obj, response => {
        common.mmk_Loading(1);
        let res = response.data;
        if (res.data.cate_name) {
          that.title = res.data.cate_name;
          wx.setNavigationBarTitle({ title: that.title });
        }
        if (res.status_code == 0) {
          if (res.data.data.length == 0 && that.pageNum > 1) {
            common.mmk_Loading(2, "已经到最底下了");
            that.isbottom = true;
            return false;
          }
          if (res.data.data.length > 0 && this.pageNum == 1) {
            that.mallList = res.data.data;
          } else if (res.data.data.length == 0 && this.pageNum == 1) {
            that.showFlag = true;
          } else {
            that.mallList.push(...res.data.data);
          }
        } else {
          common.mmk_Loading(1);
          common.mmk_Loading(2, res.message);
        }
      });
    },
    pullrefresh (e) {
      this.pageNum++;
      this.getData();
    },
    //跳转详情
    toMalldetail (e) {
      wx.navigateTo({
        url: `/pages/package_mall/goods_detail/main?goods_id=${e.id}&title=${
          e.title
          }`
      });
    }
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    this.cate_id = options.id;
    this.type = options.type;
    if (options.title) {
      wx.setNavigationBarTitle({
        title: options.title
      });
    }
    this.getData();
  },
  components: {
    shoplist
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f3f4f6;
  .nav {
    width: 100%;
    height: 48px;
    border-top: solid 1px #eeeeee;
    background: #ffffff;
    box-shadow: 0 0 8px #eeeeee;
    margin-bottom: 5px;
    .nav_item {
      width: 31.3%;
      text-align: center;
      line-height: 48px;
      font-size: 14px;
      color: #666;
      float: left;
      position: relative;
      .nav_up {
        width: 7px;
        height: 4px;
        position: absolute;
        top: 35%;
        left: 70%;
      }
      .nav_down {
        width: 7px;
        height: 4px;
        position: absolute;
        bottom: 37%;
        left: 70%;
      }
    }
    .red {
      color: #ff383e;
    }
  }
  .mallListbox {
    position: relative;
    .daodi {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 60px;
      text-align: center;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #999990;
      line-height: 20px;
    }
  }
  .bg {
    border-radius: 50%;
    width: 30%;
    margin: 0 auto;
    margin-top: 82px;
    display: none;
    .bg_img {
      width: 128px;
      height: 118px;
    }
    .bg_title {
      color: #666666;
      width: 150px;
      opacity: 0.7;
      margin-top: 5px;
    }
  }
  .bg.show {
    display: block !important;
  }
}
</style>
